<template>
  <vBreadcrumbVue></vBreadcrumbVue>
  <div class="bgff_pd16">
    <div class="step">
      <a-steps :current="current">
        <a-step>
          <!-- <span slot="title">Finished</span> -->
          <template #title>填写转账信息</template>
          <template #description>
            <span></span>
          </template>
        </a-step>
        <a-step title="确认转账信息" />
        <a-step title="完成" />
      </a-steps>
    </div>
    <div class="step step-form" v-if="current == 0">
      <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish"
      >
        <a-form-item label="付款账户" :name="['infor', 'userId']" required>
          <a-select v-model:value="formState.infor.userId">
            <a-select-option value="ww827455423@alipaiy.com"
              >ww827455423@alipaiy.com</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="收款账户" :name="['infor', 'zh']" required>
          <div class="flex-box">
            <a-form-item-rest>
              <a-select
                v-model:value="formState.infor.name"
                style="width: 100px; margin-right: -1px"
              >
                <a-select-option value="zhifubao">支付宝</a-select-option>
                <a-select-option value="company">银行账户</a-select-option>
              </a-select>
            </a-form-item-rest>

            <a-input
              class="flex-1"
              v-model:value="formState.infor.zh"
            ></a-input>
          </div>
        </a-form-item>
        <a-form-item label="收款人姓名" :name="['infor', 'skrname']" required>
          <a-input
            class="flex-1"
            v-model:value="formState.infor.skrname"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="转账金额"
          :name="['infor', 'money']"
          :rules="{ type: 'number' }"
          required
        >
          <a-input-number
            class="w100"
            prefix="￥"
            v-model:value="formState.infor.money"
          ></a-input-number>
        </a-form-item>
        <a-form-item
          :wrapper-col="{ ...layout.wrapperCol, offset: 8, flex: '1' }"
        >
          <a-button type="primary" html-type="submit">下一步</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="step step-form" v-if="current == 1">
      <a-alert
        message="确认转账后，资金将直接打入对方账户，无法退回。"
        type="info"
        show-icon
      />
      <div class="mt20">
        <a-row :wrap="true" :gutter="[8, 8]">
          <a-col :span="6">转账账号：</a-col>
          <a-col :span="18" :pull="2">vue-design@alipay.com</a-col>
          <a-col :span="6">收款账户：</a-col>
          <a-col :span="18" :pull="2">123123</a-col>
          <a-col :span="6">收款人姓名：</a-col>
          <a-col :span="18" :pull="2">Sendya</a-col>
          <a-col :span="6">转账金额：</a-col>
          <a-col :span="18" :pull="2">500元</a-col>
        </a-row>
      </div>

      <a-divider />

      <a-form
        :model="formState"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="subtwo"
      >
        <a-form-item label="支付密码" :name="['infor', 'password']" required>
          <a-input
            style="width: 200px"
            v-model:value="formState.infor.password"
            type="password"
            placeholder="请输入支付密码"
          ></a-input>
        </a-form-item>
        <a-form-item
          :wrapper-col="{ ...layout.wrapperCol, offset: 4, flex: '1' }"
        >
          <a-button type="primary" html-type="submit">下一步</a-button>
        </a-form-item>
      </a-form>
    </div>

    <div class="step step-form" v-if="current == 2">
      <a-result
        status="success"
        title="操作成功"
        sub-title="预计两小时到账"
      >
        <template #extra>
          <a-button key="console" @click="current=0" type="primary">在转一笔</a-button>
          <a-button key="buy">查看账单</a-button>
        </template>
      </a-result>
      <div class="mt20">
        <a-row :wrap="true" :gutter="[8, 8]">
          <a-col :span="6">转账账号：</a-col>
          <a-col :span="18" :pull="2">vue-design@alipay.com</a-col>
          <a-col :span="6">收款账户：</a-col>
          <a-col :span="18" :pull="2">123123</a-col>
          <a-col :span="6">收款人姓名：</a-col>
          <a-col :span="18" :pull="2">Sendya</a-col>
          <a-col :span="6">转账金额：</a-col>
          <a-col :span="18" :pull="2">500元</a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

const current = ref(1);

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const validateMessages = {
  required: "请输入${label}",
  types: {
    number: "请输入合法金额数字",
  },
};

const money = function (rule, value, callback) {
  if (parseFloat(value).toString() == "NaN") {
    callback("请输入合法金额数字");
  }
};

const formState = reactive({
  infor: {
    title: "",
    time: [],
    standard: "",
    password: "",
    userId: "ww827455423@alipaiy.com",
    name: "zhifubao",
    zh: "",
    skrname: "",
    money: "",
    options: [],
  },
});

const onFinish = () => {
  current.value = 1;
};

const subtwo = () => {
  current.value = 2;
};
</script>

<style lang="less">
.step {
  max-width: 750px;
  margin: 16px auto;
}
.step-form {
  max-width: 500px;
  margin: 40px auto 0;
}
</style>
